import { CaretRightOutlined } from '@ant-design/icons'
import { Collapse, Form, Input, InputNumber, Popover, Radio, Select, Space, Tooltip } from 'antd'
import { HexColorPicker } from 'react-colorful'
import { ReactComponent as FontSizeSvg } from './components/svgs/fontSize.svg'
import { ReactComponent as FontStyleSvg } from './components/svgs/fontStyle.svg'
import { ReactComponent as ColorSvg } from './components/svgs/color.svg'
import { ReactComponent as FontWeightSvg } from './components/svgs/fontWeight.svg'
import { ReactComponent as TextAlignSvg } from './components/svgs/textAlign.svg'
import { ReactComponent as TextAlignLeftSvg } from './components/svgs/textAlign-left.svg'
import { ReactComponent as TextAlignRightSvg } from './components/svgs/textAlign-right.svg'
import { ReactComponent as TextAlignCenterSvg } from './components/svgs/textAlign-center.svg'
import { ReactComponent as TextAlignJustifySvg } from './components/svgs/textAlign-justify.svg'

import { ReactComponent as DisplayBlockSvg } from './components/svgs/display-block.svg'
import { ReactComponent as DisplayFlexSvg } from './components/svgs/display-flex.svg'
import { ReactComponent as DisplayInlineSvg } from './components/svgs/display-inline.svg'
import { ReactComponent as DisplayInlineBlockSvg } from './components/svgs/display-inlineBlock.svg'

const { Panel } = Collapse

const { Item } = Form

function Color(props: any) {
  return <Popover trigger={['click']} arrow={false} placement="left" content={<HexColorPicker {...props} />} >
        <Space.Compact size="small" className='w-100%'>
            <div style={{ width: '80%', borderRadius: 5, cursor: 'pointer', background: (props as any).color || '#ccc' }} />
            <Input value={props.color} className="m-l-10px" onChange={e => props.onChange && props.onChange(e.target.value)}></Input>
        </Space.Compact>
    </Popover>
}

function ComponentStyle() {
  return <>
        <Collapse
            size="small"
            bordered={false}
            collapsible="header"
            expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
            style={{ padding: 0 }}
        >
            <Panel header={'字体'} key={'字体'} extra={<Item name={['style', 'fontFamily']} className="m-b-0px">
                <Select style={{ width: 130 }} options={[
                  { label: '宋体', value: 'SimSun' },
                  { label: '微软雅黑', value: 'Microsoft Yahei' },
                  { label: '苹方', value: 'PingFang SC' },
                  { label: 'Andale Mono', value: 'andale mono' },
                  { label: 'Arial', value: 'arial' },
                  { label: 'Arial Black', value: 'arial black' },
                  { label: 'Book Antiqua', value: 'book antiqua' },
                  { label: 'Comic Sans MS', value: 'comic sans ms' },
                  { label: 'Courier New', value: 'courier new' },
                  { label: 'Georgia', value: 'georgia' },
                ]}></Select>
            </Item>}>
                <div className='p-l-10px'>
                    <div className='flex'>
                        <Item className="m-b-10px w-50%" labelCol={{ span: 6 }} name={['style', 'fontSize']} label={<Tooltip title="字体大小"><FontSizeSvg /></Tooltip>}>
                            <InputNumber style={{ width: '90%' }} addonAfter={'px'} />
                        </Item>
                        <Item className="m-b-10px  w-50%" labelCol={{ span: 6 }} name={['style', 'fontStyle']} label={<Tooltip title="字体样式"><FontStyleSvg /></Tooltip>}>
                            <Radio.Group optionType="button" options={[{ label: <Tooltip title="常规"><span className='p-x-10px'>I</span></Tooltip>, value: 'normal' }, { label: <Tooltip title="斜体"> <span className='p-x-10px' style={{ fontStyle: 'italic' }}>I</span> </Tooltip>, value: 'italic' }]} />
                        </Item>
                    </div>
                    <Item className="m-b-10px" labelCol={{ span: 3 }} name={['style', 'color']} valuePropName="color" label={<Tooltip title="字体颜色"><ColorSvg /></Tooltip>}>
                        <Color />
                    </Item>
                    <Item className="m-b-10px  w-50%" name={['style', 'fontWeight']} label={<Tooltip title="字重"><FontWeightSvg /></Tooltip>}>
                        <Select defaultValue={'400'} options={[{ label: '400', value: 400 },
                          { label: '500', value: 500 },
                          { label: '600', value: 600 },
                          { label: '700', value: 700 },
                          { label: '800', value: 800 }]}></Select>
                    </Item>
                    <Item className="m-b-10px  w-100%" labelCol={{ span: 4 }} name={['style', 'textAlign']} label={<Tooltip title="文字对齐"><TextAlignSvg /></Tooltip>}>
                        <Radio.Group optionType="button" options={[
                          {
                            label: <Tooltip title="左对齐"><div className='p-x-7px p-t-2px'><TextAlignLeftSvg /></div></Tooltip>,
                            value: 'left',
                          },
                          {
                            label: <Tooltip title="右对齐"><div className='p-x-7px p-t-2px'><TextAlignRightSvg /></div></Tooltip>,
                            value: 'right',
                          },
                          {
                            label: <Tooltip title="居中"><div className='p-x-7px p-t-2px'><TextAlignCenterSvg /></div></Tooltip>,
                            value: 'center',
                          },
                          {
                            label: <Tooltip title="两侧对齐"><div className='p-x-7px p-t-2px'><TextAlignJustifySvg /></div></Tooltip>,
                            value: 'justify',
                          },
                        ]} >
                        </Radio.Group>
                    </Item>
                </div>
            </Panel>
        </Collapse>
        <div>
            <div className='bg-#fafafa m-t-10px p-10px rounded-5px'>
                <Item name={['style', 'display']} label="布局" className='m-b-0px'>
                    <Radio.Group optionType="button" options={[
                      {
                        label: <Tooltip title="块状布局"><div className='p-x-7px p-t-2px'><DisplayBlockSvg /></div></Tooltip>,
                        value: 'block',
                      },
                      {
                        label: <Tooltip title="flex弹性布局"><div className='p-x-7px p-t-2px'><DisplayFlexSvg /></div></Tooltip>,
                        value: 'flex',
                      },
                      {
                        label: <Tooltip title="inline行内布局"><div className='p-x-7px p-t-2px'><DisplayInlineSvg /></div></Tooltip>,
                        value: 'inline',
                      },
                      {
                        label: <Tooltip title="inlineBlock行内块级布局"><div className='p-x-7px p-t-2px'><DisplayInlineBlockSvg /></div></Tooltip>,
                        value: 'inlineBlock',
                      },
                    ]}>
                    </Radio.Group>
                </Item>
                <Item noStyle shouldUpdate={(prevValues, curValues) => prevValues?.style?.display !== curValues?.style?.display}>
                    {({ getFieldValue }) => {
                      if (getFieldValue(['style', 'display']) === 'flex') {
                        return <div >
                                <Item name={['style', 'flexDirection']} label="direction" className='m-b-5px m-t-10px'>
                                    <Select options={[
                                      {
                                        label: 'x轴（row）',
                                        value: 'row',
                                      },
                                      {
                                        label: 'x轴反方向（rowReverse）',
                                        value: 'rowReverse',
                                      },
                                      {
                                        label: 'y轴（column）',
                                        value: 'column',
                                      },
                                      {
                                        label: 'y轴反方向（columnReverse）',
                                        value: 'columnReverse',
                                      },
                                    ]} />
                                </Item>
                                <Item name={['style', 'flexWrap']} label="wrap">
                                    <Select options={[
                                      {
                                        label: '不换行',
                                        value: 'nowrap',
                                      },
                                      {
                                        label: '换行',
                                        value: 'wrap',
                                      },
                                    ]} />
                                </Item>
                            </div>
                      }
                      else {
                        return null
                      }
                    }}
                </Item>
            </div>

        </div>

    </>
}

export default ComponentStyle
